<!--
 * @Description: 
 * @Author: shizhe
 * @Date: 2022-03-10 20:10:32
 * @LastEditTime: 2022-03-14 16:44:58
 * @LastEditors: shizhe
 * @Reference: 
-->
<template>
  <div id="invoice">
    <tables-layout :isHaveBtn="false">
      <template #tab_layout>
        <div class="tab_nav">
          <el-tabs v-model.trim="curType">
            <el-tab-pane :label="item.name" :name="item.value" v-for="item in partTypeList" :key="item.name">
            </el-tab-pane>
          </el-tabs>
        </div>
      </template>
      <template #table_layout>
        <all-invoice v-if="curType == '0'"></all-invoice>
        <billed-invoice v-else-if="curType == '1'"></billed-invoice>
        <printed-invoice v-else-if="curType == '2'"></printed-invoice>
        <abolished-invoice v-else-if="curType == '3'"></abolished-invoice>
        <flushed-invoice v-else></flushed-invoice>
      </template>
    </tables-layout>
  </div>
</template>

<script>
import TablesLayout from '../TablesLayout.vue'
import AbolishedInvoice from './tables/abolishedInvoice.vue'
import AllInvoice from './tables/allInvoice.vue'
import BilledInvoice from './tables/billedInvoice.vue'
import FlushedInvoice from './tables/flushedInvoice.vue'
import PrintedInvoice from './tables/printedInvoice.vue'

export default {
  components: { TablesLayout, AllInvoice, PrintedInvoice, BilledInvoice, AbolishedInvoice, FlushedInvoice },
  data() {
    return {
      curType: '0',
      partTypeList: [
        {
          value: '0',
          name: '全部'
        },
        {
          value: '1',
          name: '已开票'
        },
        {
          value: '2',
          name: '已打印'
        },
        {
          value: '3',
          name: '已作废'
        },
        {
          value: '4',
          name: '已冲红'
        }
      ]
    }
  },
  mounted() {},
  methods: {}
}
</script>
<style lang="less" scoped>
#invoice {
  height: 100%;
  .tab_nav {
    /deep/ .el-tabs__nav-wrap::after {
      height: 0;
    }
    /deep/ .el-tabs__item {
      height: 60px;
      line-height: 60px;
    }
    /deep/ .el-tabs__header {
      margin: 0;
    }
  }
}
</style>
